<template>
  <div>
    <el-card style="border-radius: 12px">
      <!-- 搜索头 -->
      <el-form inline style="margin-top: 10px">
        <el-form-item label="会议室号:">
          <el-col>
            <el-input
              style="width: auto"
              placeholder="请输入会议室号"
              clearable
              v-model="roomId"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="会议主题:">
          <el-input
            style="width: auto"
            placeholder="请输入会议主题"
            clearable
            v-model="roomName"
          ></el-input>
        </el-form-item>
        <el-form-item label="申请人:">
          <el-input
            style="width: auto"
            placeholder="请输入申请人"
            clearable
            v-model="application"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            style="margin-left: 20px"
            type="primary"
            icon="Search"
            @click="getMeetingData()"
            v-has="'btn.Department.search'"
          >
            搜索
          </el-button>
          <el-button
            @click="
              ;(roomId = ''),
                (roomName = ''),
                (application = ''),
                getMeetingData()
            "
          >
            重置
          </el-button>
        </el-form-item>
      </el-form>
      <!-- 数据显示 -->
      <el-table :data="meetingData" border stripe>
        <el-table-column
          width="40px"
          align="center"
          type="index"
          prop="index"
        ></el-table-column>
        <el-table-column
          width="80px"
          align="center"
          label="会议号"
          prop="roomNumber"
        ></el-table-column>
        <el-table-column
          width="80px"
          align="center"
          label="会议室"
          prop="roomName"
        ></el-table-column>
        <el-table-column
          width="80px"
          align="center"
          label="申请人"
          prop="application"
        ></el-table-column>
        <el-table-column
          align="center"
          label="会议主题"
          prop="title"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          label="联系方式"
          prop="userMobile"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          label="开始时间"
          prop="startTime"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          label="结束时间"
          prop="endTime"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column align="center" label="会议状态" width="110px">
          <template #="{ row, $index }">
            <el-tag
              type="danger"
              v-if="compareDate(row.startTime, row.endTime, currentTime) == -1"
            >
              已结束
            </el-tag>
            <el-tag
              type="success"
              v-else-if="
                compareDate(row.startTime, row.endTime, currentTime) == 0
              "
            >
              会议进行中
            </el-tag>
            <el-tag
              type="info"
              v-else-if="
                compareDate(row.startTime, row.endTime, currentTime) == 1
              "
            >
              未开始
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="320px">
          <template #="{ row, $index }">
            <el-tooltip
              effect="dark"
              content="查看"
              placement="top"
              :enterable="false"
            >
              <el-button type="success" @click="viewMember(row.id)">
                成员列表
              </el-button>
            </el-tooltip>
            <el-tooltip
              effect="dark"
              content="添加"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="primary"
                @click="addMember(row.id)"
                v-has="'btn.Department.add'"
              >
                添加成员
              </el-button>
            </el-tooltip>
            <el-tooltip
              effect="dark"
              content="删除会议室"
              placement="top"
              :enterable="false"
            >
              <el-popconfirm
                :title="`删除: ${row.name}?`"
                icon="Delete"
                icon-color="red"
                @confirm="deleteMeeting(row.id)"
              >
                <template #reference>
                  <el-button
                    type="danger"
                    icon="Delete"
                    v-has="'btn.Department.delete'"
                  >
                    删除
                  </el-button>
                </template>
              </el-popconfirm>
            </el-tooltip>
            <!-- <el-button type="primary"  @click="viewMember(row.id)">查看</el-button>
            <el-button type="primary" icon="User" @click="addMember(row.id)">添加成员</el-button> -->
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        style="margin-top: 10px"
        v-model:current-page="pageNo"
        v-model:page-size="limit"
        :page-sizes="[5, 10, 15, 20]"
        :small="false"
        :disabled="false"
        :background="true"
        layout="prev, pager, next, jumper, -> ,total, sizes"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="getMeetingData"
      />
    </el-card>

    <el-dialog
      :title="'添加会议成员'"
      v-model="addDialogVisible"
      width="50% "
      style="border-radius: 12px"
    >
      <el-transfer
        style="margin-left: 10%"
        v-model="getMember"
        filterable
        filter-placeholder="输入用户名/工号"
        :data="userData"
        :props="{
          key: 'jobNumber',
          label: 'userName',
        }"
        :titles="['未添加', '已添加']"
      >
        <template #right-footer>
          <el-button
            class="transfer-footer"
            type="primary"
            size="default"
            style="margin-left: 30%"
            @click="addMeetingMember()"
          >
            提交
          </el-button>
        </template>
      </el-transfer>
    </el-dialog>
    <el-dialog
      :title="'成员列表'"
      v-model="addMemberVisible"
      width="80% "
      style="border-radius: 12px"
    >
      <el-table :data="MeetingMemberData" border stripe>
        <el-table-column
          align="center"
          type="index"
          prop="index"
        ></el-table-column>
        <el-table-column
          align="center"
          label="参会人"
          prop="remember"
        ></el-table-column>
        <el-table-column
          align="center"
          label="参会人工号"
          prop="jobNumber"
        ></el-table-column>
        <el-table-column
          align="center"
          label="参会人电话"
          prop="rememberMobile"
        ></el-table-column>
        <el-table-column label="成员操作" align="center">
          <template #="{ row, $index }">
            <el-tooltip
              effect="dark"
              content="删除"
              placement="top"
              :enterable="false"
            >
              <el-popconfirm
                :title="`删除: ${row.remember}?`"
                icon="Delete"
                icon-color="red"
                @confirm="deleteMember(row.id)"
              >
                <template #reference>
                  <el-button
                    size="small"
                    type="danger"
                    icon="Delete"
                  ></el-button>
                </template>
              </el-popconfirm>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 10px"
        v-model:current-page="memberPageNo"
        v-model:page-size="memberLimit"
        :page-sizes="[5, 10, 15, 20]"
        :small="false"
        :disabled="false"
        :background="true"
        layout="prev, pager, next, jumper, -> ,total, sizes"
        :total="memberTotal"
        @size-change="handleSizeMemberChange"
        @current-change="getMeetingMemberData"
      />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, onUnmounted } from 'vue'
import {
  ResponseData,
  meetingLists,
  meetingMemberList,
  MeetingMemberResponseData,
} from '@/api/meeting/type'
import {
  reqMeetingPageData,
  reqAddMeetingMember,
  reqGetMeetingMember,
  reqDeleteMeetingData,
  reqDeleteMemberData,
} from '@/api/meeting'
import { reqUserInfoList } from '@/api/acl/user'
import { UserListResponseData } from '@/api/acl/user/type'
import { reqUserInfo } from '@/api/acl/user'
import type { UserResponseData, Records, SearchUser } from '@/api/acl/user/type'
// 添加会议成员接口
let addDialogVisible = ref<boolean>(false)
let addMemberVisible = ref<boolean>(false)
// 当前页码
let pageNo = ref<number>(1)
let memberPageNo = ref<number>(1)
// 定义每页展示数据
let limit = ref<number>(10)

let memberLimit = ref<number>(10)
// 定义展示数据的总数
let total = ref<number>(0)

let memberTotal = ref<number>(0)

// 搜索框信息
let roomId = ref<string>()
let roomName = ref<string>()
let application = ref<string>()
// 获取未会议信息
let meetingData = ref<meetingLists>([])
let MeetingMemberData = ref<meetingMemberList>([])

const currentTime = ref(new Date().toLocaleString())

// 会议操作按钮是否禁用
const isButtonDisabled = ref(true)
// 组件挂载完毕
onMounted(() => {
  getMeetingData()
  getAllUser()
  const interval = setInterval(() => {
    currentTime.value = new Date().toLocaleString()
  }, 1000)
  onUnmounted(() => {
    clearInterval(interval)
  })
})

const compareDate = (
  startTime: string,
  endTime: string,
  currentTime: string,
) => {
  let start = new Date(Date.parse(startTime))
  let end = new Date(Date.parse(endTime))
  let current = new Date(Date.parse(currentTime))
  if (end < current) {
    return -1
  } else if (start <= current && end >= current) {
    return 0
  } else {
    return 1
  }
}
// 更改分页器大小
const handleSizeChange = () => {
  getMeetingData()
}
const handleSizeMemberChange = () => {
  getMeetingMemberData()
}
const getMeetingData = async (page: number = 1) => {
  pageNo.value = page
  let params = {
    name: roomName.value ? roomName.value : '',
    startTime: null,
    endTime: null,
    application: application.value ? application.value : '',
    roomNumber: roomId.value ? roomId.value : '',
    isExaminestate: 1,
    currentPage: pageNo.value,
    pageSize: limit.value,
  }
  console.log(params)

  let result: any = await reqMeetingPageData(params)
  console.log('查看会议信息shlb' + result)

  if (result.code == 200) {
    total.value = result.data.total
    meetingData.value = result.data.records
  }
}

const meetingId = ref<number | any>()
const userData = ref<Records>()
// 需要添加的成员
const getMember = ref([])
const addMember = (id: number) => {
  meetingId.value = id
  addDialogVisible.value = true
}

let deleteMemberListId = ref<number[]>([])
// 删除确认框按钮回调
const deleteMember = async (id: number) => {
  // 点击确定按钮删除请求发送
  deleteMemberListId.value.push(id)
  let result = await reqDeleteMemberData(deleteMemberListId.value)
  if (result.code == 200) {
    ElNotification({
      type: 'success',
      message: '删除成功',
    })
    getMeetingMemberData()
  } else {
    ElNotification({
      type: 'error',
      message: '删除失败',
    })
  }
}

let deleteMeetingListId = ref<number[]>([])
const deleteMeeting = async (id: number) => {
  // 点击确定按钮删除请求发送
  deleteMeetingListId.value.push(id)
  let result = await reqDeleteMeetingData(deleteMeetingListId.value)
  if (result.code == 200) {
    ElNotification({
      type: 'success',
      message: '删除成功',
    })
    getMeetingData()
  } else {
    ElNotification({
      type: 'error',
      message: '删除失败',
    })
  }
}

const addMeetingMember = async () => {
  const Members = reactive<any>({
    jobNumber: getMember.value,
    meetingId: meetingId.value,
  })
  let result: ResponseData = await reqAddMeetingMember(Members)
  if (result.code == 200) {
    ElNotification({
      type: 'success',
      message: '邀请成功',
    })
  } else {
    ElNotification({
      type: 'error',
      message: '邀请失败',
    })
  }
}

const viewMember = (id: number) => {
  addMemberVisible.value = true
  meetingId.value = id
  getMeetingMemberData()
  // let result:any = await reqViewMember(id);
  // if(result.code==200){
  //   MemberData.value=result
  // }
}

const getAllUser = async () => {
  let res: UserListResponseData = await reqUserInfoList()
  if (res.code === 200) {
    userData.value = res.data
  }
}

const getMeetingMemberData = async (page: number = 1) => {
  memberPageNo.value = page
  let params = {
    meetingId: meetingId.value,
    currentPage: memberPageNo.value,
    pageSize: memberLimit.value,
  }

  let result: MeetingMemberResponseData = await reqGetMeetingMember(params)
  if (result.code === 200) {
    memberTotal.value = result.data.total
    MeetingMemberData.value = result.data.records
  }
}
</script>

<style scoped lang="scss"></style>
